<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!--
          Customize this policy to fit your own app's needs. For more guidance, please refer to the docs:
              https://cordova.apache.org/docs/en/latest/
          Some notes:
              * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
              * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                  * Enable inline JS: add 'unsafe-inline' to default-src
          -->
<!--    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="css/vant.css">
    <link rel="stylesheet" href="css/addMarket.css">
    <title>立案</title>
</head>

<body>
<div id="app" class="app" v-cloak>
    <van-sticky>
        <van-nav-bar title="立案" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    </van-sticky>
    <div class="main-box">
        <van-form @failed="onFailed" label-align="top" @submit="saveForm">
            <!-- 通过 pattern 进行正则校验 -->
            <van-field v-model="formData.caseTitle" label="标题：" name="pattern" placeholder="请输入"
                       :rules="[{ required: true, message: '请输入正确内容' }]"></van-field>

            <!--            关联信息-->
            <van-field v-model="formData.relevancyName" is-link readonly name="type" label="关联信息：" placeholder="请选择"
                       @click="showListAll = true" :rules="[{ required: true, message: '请选择关联信息' }]"></van-field>

            <!--            类型-->
            <van-field v-model="formData.typeName" is-link readonly name="type" label="类型：" placeholder="请选择"
                       @click="showType = true":rules="[{ required: true, message: '请选择类型' }]"></van-field>


            <!--            所属区域-->
            <van-field v-model="formData.areaName" is-link readonly name="areaName" label="所属区域：" placeholder="请选择"
                       @click="showArea = true":rules="[{ required: true, message: '请选择所属区域' }]"></van-field>


            <!--            所属街道-->
            <van-field v-model="formData.streetName" is-link readonly name="streetName" label="所属街道：" placeholder="请选择"
                       @click="showStreet = true":rules="[{ required: true, message: '请选择所属街道' }]"></van-field>


            <van-field v-model="formData.location" label="位置描述：" name="location" placeholder="请输入"
                       :rules="[{ required: true, message: '请输入正确内容' }]"></van-field>

            <!--            事件类型-->
            <van-field v-model="formData.eventTypeName" is-link readonly name="eventTypeName" label="事件类型："
                       placeholder="请选择"
                       @click="showEventType = true":rules="[{ required: true, message: '请选择事件类型' }]"></van-field>

            <van-field v-model="formData.eventInfo" label="事件描述：" name="eventInfo" placeholder="请输入"
                       :rules="[{ required: true, message: '请输入正确内容' }]"></van-field>


            <van-field v-model="formData.processLimited" label="处理时限：" is-link readonly name="processLimited" placeholder="请输入"
                       @click="showProcessLimited = true"></van-field>
            <van-field name="caseImg" label="图片：">
                <template #input>
                  <van-uploader :after-read="afterRead" result-type="file" v-if="!formData.caseImg"></van-uploader>
                    <van-image
                      v-else
                      width="100"
                      height="100"
                      :src="formData.caseImg"
                    ></van-image>
                </template>
            </van-field>


          <van-sticky offset-bottom="0" position="bottom">
            <div style="background: #fff; padding: 16px;">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-sticky>
        </van-form>
    </div>

  <!--        关联信息-->
  <van-popup v-model:show="showListAll" destroy-on-close position="bottom">
    <van-picker :columns="listAll" :columns-field-names="{text: 'advertisingTitle', value: 'advertisingId'}" :model-value="[formData.areaId]" @confirm="saveListAll"
                @cancel="showListAll = false"></van-picker>
  </van-popup>

    <!--        类型-->
    <van-popup v-model:show="showType" destroy-on-close position="bottom">
        <van-picker :columns="typeList" :columns-field-names="{text: 'typeName', value: 'typeId'}" :model-value="[formData.typeId]" @confirm="saveType"
                    @cancel="showType = false"></van-picker>
    </van-popup>

    <!--        所属区域-->
    <van-popup v-model:show="showArea" destroy-on-close position="bottom">
        <van-picker :columns="areaList" :columns-field-names="{text: 'orgName', value: 'orgId'}" :model-value="[formData.areaId]" @confirm="saveArea"
                    @cancel="showArea = false"></van-picker>
    </van-popup>

    <!--        所属街道-->
    <van-popup v-model:show="showStreet" destroy-on-close position="bottom">
        <van-picker :columns="streetList" :columns-field-names="{text: 'jdbName', value: 'jdbId'}" :model-value="[formData.streetId]" @confirm="saveStreet"
                    @cancel="showStreet = false"></van-picker>
    </van-popup>
    <!--        事件类型-->
    <van-popup v-model:show="showEventType" destroy-on-close position="bottom">
        <van-picker :columns="eventTypeList" :columns-field-names="{text: 'label', value: 'id'}" :model-value="[formData.eventType]" @confirm="saveEventType"
                    @cancel="showEventType = false"></van-picker>
    </van-popup>
    <!--        事件类型-->
    <van-popup v-model:show="showProcessLimited" destroy-on-close position="bottom">
        <van-date-picker @confirm="saveProcessLimited"
                    @cancel="showProcessLimited = false"></van-date-picker>
    </van-popup>

</div>
<script src="./js/jquery/jquery.min.js"></script>
<script src="./js/vue3.js"></script>
<script src="./js/adApi.js"></script>
<script src="./js/vant.js"></script>
<script src="./js/addMarket.js"></script>
</body>

</html>